

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" href="/img/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Han Qiu">
  <meta name="keywords" content="">
  
    <meta name="description" content="一、容器属性1. display：是否开启grid布局1234567&#x2F;*    grid：指定容器采用grid布局，容器元素默认为块级元素    inline-grid：指定容器采用grid布局，容器元素设为行内元素*&#x2F;.container &amp;#123;    display: grid | inline-grid;&amp;#125;  2. grid-template-columns属性、grid-t">
<meta property="og:type" content="article">
<meta property="og:title" content="grid网格布局">
<meta property="og:url" content="http://example.com/2022/02/14/grid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/index.html">
<meta property="og:site_name" content="寒秋の博客">
<meta property="og:description" content="一、容器属性1. display：是否开启grid布局1234567&#x2F;*    grid：指定容器采用grid布局，容器元素默认为块级元素    inline-grid：指定容器采用grid布局，容器元素设为行内元素*&#x2F;.container &amp;#123;    display: grid | inline-grid;&amp;#125;  2. grid-template-columns属性、grid-t">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-02-14T03:25:12.000Z">
<meta property="article:modified_time" content="2022-02-28T01:30:16.310Z">
<meta property="article:author" content="Han Qiu">
<meta name="twitter:card" content="summary_large_image">
  
  
  <title>grid网格布局 - 寒秋の博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.0.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>blogs</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="grid网格布局">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-02-14 11:25" pubdate>
        2022年2月14日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      5.4k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      46 分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">grid网格布局</h1>
            
            <div class="markdown-body">
              <h4 id="一、容器属性"><a href="#一、容器属性" class="headerlink" title="一、容器属性"></a>一、容器属性</h4><h5 id="1-display：是否开启grid布局"><a href="#1-display：是否开启grid布局" class="headerlink" title="1. display：是否开启grid布局"></a>1. display：是否开启grid布局</h5><figure class="highlight css"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*</span><br><span class="hljs-comment">    grid：指定容器采用grid布局，容器元素默认为块级元素</span><br><span class="hljs-comment">    inline-grid：指定容器采用grid布局，容器元素设为行内元素</span><br><span class="hljs-comment">*/</span><br><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">display</span>: grid | inline-grid;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="2-grid-template-columns属性、grid-template-rows属性"><a href="#2-grid-template-columns属性、grid-template-rows属性" class="headerlink" title="2. grid-template-columns属性、grid-template-rows属性"></a>2. grid-template-columns属性、grid-template-rows属性</h5><ul>
<li>gird-template-columns属性用来定义每一列的列宽</li>
<li>grid-template-rows属性用来定义每一行的行高</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">display</span>: grid;<br>    <span class="hljs-comment">/* 使用绝对单位，定义三列，每列列宽为100px */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">100px</span> <span class="hljs-number">100px</span> <span class="hljs-number">100px</span>;<br>    <span class="hljs-comment">/* 使用百分比，定义三列，每列列宽为33.33% */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">33.33%</span> <span class="hljs-number">33.33%</span> <span class="hljs-number">33.33%</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>**repeact()**：简化重复的值。该函数接受两个参数，第一个是重复的次数，第二个是要重复的值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">display</span>: grid;<br>    <span class="hljs-comment">/* 定义三列，每列列宽为100px */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-built_in">repeat</span>(<span class="hljs-number">3</span>, <span class="hljs-number">100px</span>);<br>    <span class="hljs-comment">/* 定义六列，第一、四列列宽为100px，第二、五列列宽为30px，第三、六列列宽为70px */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-built_in">repeat</span>(<span class="hljs-number">2</span>, <span class="hljs-number">100px</span> <span class="hljs-number">30px</span> <span class="hljs-number">70px</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>auto-fill关键字</strong>：自动填充，让一行/列中尽可能容纳多的单元格</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">display</span>: grid;<br>    <span class="hljs-comment">/* 每列列宽为100px，自动填充直到容器不能放置更多的列，列数视容器宽度而定 */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-built_in">repeat</span>(auto-fill, <span class="hljs-number">100px</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>fr关键字</strong>：表示多行/列之间的比例关系</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">display</span>: grid;<br>    <span class="hljs-comment">/* 定义两列，列宽相同 */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr;<br>    <span class="hljs-comment">/* 定义三列，第一列列宽为150px，第三列列宽为第二列列宽的两倍 */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">150px</span> <span class="hljs-number">1</span>fr <span class="hljs-number">2</span>fr;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>**minmax()**：产生一个长度范围，表示长度在范围之中。该函数接受两个参数，分别为最小值和最大值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-comment">/* 定义三列，第一列和第二列列宽相等，第三列列宽不小于100px，不大于1fr */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">1</span>fr <span class="hljs-number">1</span>fr <span class="hljs-built_in">minmax</span>(<span class="hljs-number">100px</span>, <span class="hljs-number">1</span>fr);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>auto关键字</strong>：由浏览器决定长度</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-comment">/* 定义三列，第一列和第三列列宽为100px，第二列列宽由浏览器决定，基本等于该列单元格的最大宽度 */</span><br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">100px</span> auto <span class="hljs-number">100px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="3-grid-row-gap属性、grid-column-gap属性、grid-gap属性"><a href="#3-grid-row-gap属性、grid-column-gap属性、grid-gap属性" class="headerlink" title="3. grid-row-gap属性、grid-column-gap属性、grid-gap属性"></a>3. grid-row-gap属性、grid-column-gap属性、grid-gap属性</h5><ul>
<li>grid-row-gap 属性设置行与行的间隔（行间距）</li>
<li>grid-column-gap 属性设置列与列的间隔（列间距）</li>
<li>grid-gap 属性是 grid-column-gap 和 grid-row-gap 的合并简写形式</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-comment">/* 行间距为20px */</span><br>    grid-row-gap: <span class="hljs-number">20px</span>;<br>    <span class="hljs-comment">/* 列间距为20px */</span><br>    grid-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">20px</span>;<br>    <span class="hljs-comment">/* 行间距为20px，列间距为20px */</span><br>    grid-gap: <span class="hljs-number">20px</span> <span class="hljs-number">20px</span>;<br>    <span class="hljs-comment">/* 如果省略第二个值，浏览器认为第二个值等于第一个值 */</span><br>    grid-gap: <span class="hljs-number">20px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>根据最新标准，以上三个属性名的 grid- 前缀已经删除，grid-column-gap 写成 column-gap，grid-row-gap 写成 row-gap，grid-gap 写成 gap</p>
</blockquote>
<h5 id="4-grid-template-areas属性"><a href="#4-grid-template-areas属性" class="headerlink" title="4. grid-template-areas属性"></a>4. grid-template-areas属性</h5><ul>
<li>grid-template-areas属性用于定义一个区域，一个区域由单个或多个单元格组成</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">display</span>: grid;<br>    grid-gap: <span class="hljs-number">10px</span>;<br>    grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-built_in">repeat</span>(<span class="hljs-number">3</span>, <span class="hljs-number">120px</span>);<br>    <span class="hljs-comment">/* 划分六个单元格，小数点代表空的单元格，也就是没有用到该单元格 */</span><br>    grid-template-areas: <span class="hljs-string">&quot;. header header&quot;</span><br>                                <span class="hljs-string">&quot;sidebar content content&quot;</span>;<br>&#125;<br><br><span class="hljs-comment">/* 将类 .header .sidebar .content 所在的元素放在上面 grid-template-areas 中定义的 header sidebar content 区域中 */</span><br><span class="hljs-selector-class">.header</span> &#123;<br>    grid-area: header;<br>&#125;<br><span class="hljs-selector-class">.sidebar</span> &#123;<br>    grid-area: sidebar;<br>&#125;<br><span class="hljs-selector-class">.content</span> &#123;<br>    grid-area: content;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="5-grid-auto-flow属性"><a href="#5-grid-auto-flow属性" class="headerlink" title="5. grid-auto-flow属性"></a>5. grid-auto-flow属性</h5><ul>
<li>grid-auto-flow 属性指定容器子元素的排列方式。默认顺序是“先行后列”，即先填满第一行，再开始放入第二行</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*</span><br><span class="hljs-comment">    row：先行后列</span><br><span class="hljs-comment">    row dense：先行后列，尽可能紧密排布，尽量不出现空格</span><br><span class="hljs-comment">    column：先列后行</span><br><span class="hljs-comment">    column dense：先列后行，尽可能紧密排布，尽量不出现空格</span><br><span class="hljs-comment">*/</span><br><span class="hljs-selector-class">.container</span> &#123;<br>    grid-autp-flow: row | row dense | column | column dense;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="6-justify-items属性、align-items属性、place-items属性"><a href="#6-justify-items属性、align-items属性、place-items属性" class="headerlink" title="6. justify-items属性、align-items属性、place-items属性"></a>6. justify-items属性、align-items属性、place-items属性</h5><ul>
<li>justify-items 属性设置单元格内容的水平位置</li>
<li>align-items 属性设置单元格内容的垂直位置</li>
<li>place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。如果省略第二个值，浏览器会认为两个属性值相同</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*</span><br><span class="hljs-comment">    start：对齐单元格的起始边缘</span><br><span class="hljs-comment">    end：对齐单元格的结束边缘</span><br><span class="hljs-comment">    center：单元格内部居中</span><br><span class="hljs-comment">    stretch：拉伸，占满单元格的整个宽度（默认值）</span><br><span class="hljs-comment">*/</span><br><span class="hljs-selector-class">.container</span> &#123;<br>    justify-items: start | end | center | stretch;<br>    <span class="hljs-attribute">align-items</span>: start | end | center | stretch;<br>    place-items: &lt;align-items&gt; &lt;justify-items&gt;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="7-justify-content属性、align-content属性、place-content属性"><a href="#7-justify-content属性、align-content属性、place-content属性" class="headerlink" title="7. justify-content属性、align-content属性、place-content属性"></a>7. justify-content属性、align-content属性、place-content属性</h5><ul>
<li>justify-content 属性是整个内容区域在容器里面的水平位置</li>
<li>align-content 属性是整个内容区域在容器里面的垂直位置</li>
<li>place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式。如果省略第二个值，浏览器会认为两个属性值相同</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*</span><br><span class="hljs-comment">    start：对齐容器的起始边框</span><br><span class="hljs-comment">    end：对齐容器的结束边框</span><br><span class="hljs-comment">    center：容器内部居中</span><br><span class="hljs-comment">    stretch：项目大小没有指定时，拉伸占据整个网格容器</span><br><span class="hljs-comment">    space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍</span><br><span class="hljs-comment">    space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔</span><br><span class="hljs-comment">    space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔</span><br><span class="hljs-comment">*/</span><br><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">justify-content</span>: start | end | center | stretch | space-around | space-between | space-evenly;<br>    <span class="hljs-attribute">align-content</span>: start | end | center | stretch | space-around | space-between | space-evenly;<br>    place-<span class="hljs-attribute">content</span>: &lt;align-content&gt; &lt;justify-content&gt;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="8-grid-auto-columns属性、grid-auto-rows属性"><a href="#8-grid-auto-columns属性、grid-auto-rows属性" class="headerlink" title="8. grid-auto-columns属性、grid-auto-rows属性"></a>8. grid-auto-columns属性、grid-auto-rows属性</h5><ul>
<li>grid-auto-columns 属性和 grid-auto-rows 属性用来设置浏览器自动创建的多余网格的列宽和行高。它们的写法与 grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器会根据单元格内容的大小，决定新增网格的列宽和行高</li>
</ul>
<h5 id="9-grid-template属性、grid属性（简写形式，不建议使用）"><a href="#9-grid-template属性、grid属性（简写形式，不建议使用）" class="headerlink" title="9. grid-template属性、grid属性（简写形式，不建议使用）"></a>9. grid-template属性、grid属性（简写形式，不建议使用）</h5><ul>
<li>grid-template 属性是 grid-template-columns、grid-template-rows 和 grid-template-areas 三个属性的合并简写形式</li>
<li>grid 属性是 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow 六个属性的合并简写形式</li>
</ul>
<h4 id="二、项目属性"><a href="#二、项目属性" class="headerlink" title="二、项目属性"></a>二、项目属性</h4><h5 id="1-grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性"><a href="#1-grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性" class="headerlink" title="1. grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性"></a>1. grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性</h5><ul>
<li>grid-column-start 属性表示项目左边框所在的垂直网格线</li>
<li>grid-column-end 属性表示项目右边框所在的垂直网格线</li>
<li>grid-row-start 属性表示项目上边框所在的水平网格线</li>
<li>grid-row-end 属性表示项目下边框所在的水平网格线</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;<br>    grid-column-start: <span class="hljs-number">1</span>;<br>    grid-column-end: <span class="hljs-number">2</span>;<br>    grid-row-start: <span class="hljs-number">1</span>;<br>    grid-row-end: <span class="hljs-number">2</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="2-grid-column属性、grid-row属性"><a href="#2-grid-column属性、grid-row属性" class="headerlink" title="2. grid-column属性、grid-row属性"></a>2. grid-column属性、grid-row属性</h5><ul>
<li>grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式</li>
<li>grid-row 属性是 grid-row-start 和 grid-row-end 的合并简写形式</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span>&#123;<br>    grid-column: &lt;grid-column-start&gt; / &lt;grid-column-end&gt;;<br>    grid-row: &lt;grid-row-start&gt; / &lt;grid-row-end&gt;;<br>    <br>    <span class="hljs-comment">/* 例如 */</span><br>    grid-column: <span class="hljs-number">1</span> / <span class="hljs-number">2</span>;<br>    grid-row: <span class="hljs-number">1</span> / <span class="hljs-number">2</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="3-grid-area属性"><a href="#3-grid-area属性" class="headerlink" title="3. grid-area属性"></a>3. grid-area属性</h5><ul>
<li>grid-area 属性指定项目放在哪个区域（在容器属性 grid-template-areas 中提及）</li>
<li>grid-area 属性还可以用作 grid-column-start、grid-column-end、grid-row-start、grid-row-end 的合并简写形式，直接指定项目的位置</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;<br>    grid-area: &lt;grid-row-start&gt; / &lt;grid-column-start&gt; / &lt;grid-row-end&gt; / &lt;grid-column-end&gt;;<br>    <br>    <span class="hljs-comment">/* 例如 */</span><br>    <span class="hljs-comment">/* header 为 grid-template-areas 中定义的区域 */</span><br>    grid-area: header;<br>    <span class="hljs-comment">/* 简写形式，直接指定项目位置 */</span><br>    grid-area: <span class="hljs-number">1</span> / <span class="hljs-number">1</span> / <span class="hljs-number">2</span> / <span class="hljs-number">2</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h5 id="4-justify-self属性、align-self属性、place-self属性"><a href="#4-justify-self属性、align-self属性、place-self属性" class="headerlink" title="4. justify-self属性、align-self属性、place-self属性"></a>4. justify-self属性、align-self属性、place-self属性</h5><ul>
<li>justify-self 属性设置单元格内容的水平位置。跟 justify-items 属性的用法完全一致，但只作用于单个项目</li>
<li>align-self 属性设置单元格内容的垂直位置。跟 align-items 属性的用法完全一致，但之作用于单个项目</li>
<li>place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。如果忽略第二个值，浏览器会认为两个属性值相等</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*</span><br><span class="hljs-comment">    start：对齐单元格的起始边缘</span><br><span class="hljs-comment">    end：对齐单元格的结束边缘</span><br><span class="hljs-comment">    center：单元格内容居中</span><br><span class="hljs-comment">    stretch：拉伸，占满单元格的整个宽度（默认值）</span><br><span class="hljs-comment">*/</span><br><span class="hljs-selector-class">.item</span> &#123;<br>    justify-self: start | end | center | stretch;<br>    <span class="hljs-attribute">align-self</span>: start | end | center | stretch;<br>    place-self: &lt;align-self&gt; / &lt;justify-self&gt;;<br>&#125;<br></code></pre></td></tr></table></figure>


<blockquote>
<p>参考文档：<br><a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html">阮一峰老师的grid布局教程</a><br><a target="_blank" rel="noopener" href="https://juejin.cn/post/6854573220306255880#heading-7">掘金grid布局文章</a></p>
</blockquote>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/css/">css</a>
                    
                  </div>
                
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/02/14/css%E5%9F%BA%E7%A1%80/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">css基础</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/02/14/flex%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80/">
                        <span class="hidden-mobile">flex弹性布局</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
